<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网上预订</title>
<link href="CSS/style01.css" rel="stylesheet" type="text/css">
<style type="text/css">
body{
  font-family: "微软雅黑"；
}
#title{
  margin-right: 60px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
}
#main{
  font-size: 18px;
  width: 400px;
  margin: 40px auto;
  height: 8px;
}
#main li{
  height: 45px;
  list-style: none;
}
#user,#psw1,#psw2{
  height: 20px;
  width: 150px;
  border: #157782 1px solid;
  background: #E0FFFF;
  font-size: 15px;
}
#user:hover,#psw1:hover,#psw2:hover{
  background: #fff;
}
.textarea{
  font-size: 18px;
}
</style>
</head>

<body>
<body>
  <!------------------头部---------------------------->
  <header>
      <!---------------LOGO图片-------------------------->
    <img id="logo" src="zuoye/logo.jpg" alt="logo" width="238" height="54" class="left">
    <!-------------------导航-------------------------->
    <nav id="menu">
        <a href="index.html">首   页</a>
      <a href="dierye.html">地区简介</a>
      <a href="jingdian.html" >旅游景点</a>
        <a href="product01.html" >出行路线</a>
        <a href="meishi.html">特色美食</a>
        <a href="#" class="selected">网上预订</a>
      <a href="#">游记攻略</a>
      <a href="#">摄影写真</a>
      <a href="#">装备商城</a>
      
    </nav>
    <!-------------------图片-------------------------->
    <img src="zuoye/6.jpg" width="1200" height="225" alt="">
    <!-------------------路径-------------------------->
    <div id="lujing">您目前的位置：首页&gt;&gt;网上预订</div>
  </header>
<div id="title">网上预订</div>
<div id="main">
 <ul>
   <form>
     <li>
    <label for="user">姓&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名：</label>
    <input type="text" name="username" id="user" placeholder="请输入姓名">
     </li>
     <li>
    <label for="psw1">身份证号：</label>
    <input type="password" name="paw1" id="psw1" placeholder="请输入身份证号">
     </li>
     <li>
    <label for="psw2">所在地址：</label>
    <input type="password" name="psw2" id="psw2" placeholder="请输入所在地址">
     </li>
     <li>
       <label>住宿旅店：</label>
		 <input type="radio" name="SEX"  >
      是
     <input type="radio" name="SEX" >
	  否</li>
     <li>
       <label>观赏地点：</label>
       <input type="checkbox" value="sport" name="hobby">二龙湖
       <input type="checkbox" value="chat" name="hobby">玫瑰山
       <input type="checkbox" value="game" name="hobby">温州城
     </li>
     <li>
       <label for="date">预订日期：</label>
		 <input type="date" id="date" value="2020-01-01">
     </li>
     <li>
       <input type="radio" name="SEX" id="submit" >同意以下条款并提交注册信息
      
     </li>
     <li>
     阅读《公主岭旅游服务协议》</li>
     <li>
     <textarea name="textarea" cols="60" rows="4" style="font-size: 16px">
     本协议由您与公主岭旅游官网共同缔结，本协议具有合同效力。在此期间我们会为24小时为您提供服务，有任何问题都可以联系我们，祝您旅游愉快！</textarea><br><br>
      &nbsp<input type="button" value="确定"  text="弹出消息框" onclick="javascript:alert('预订成功');"  style="font-size: 18px">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="reset" style="font-size: 18px"><br><br>
     </li>
   </form>
 </ul>
</div>
</body>
</html>
